<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>

<body style="padding:0;">
<table style="width:100%;height:90%;" id="box">
</table>
<table style="width:100%;height:10%;">
    <tr>
        <td style="text-align:center; color:#FFF; background-color:#337ab7; font-size:32pt;" onclick="startRun()">开始</td>
        <td style="width:2px;"></td>
        <td style="text-align:center; width:50%; color:#FFF; background-color:#337ab7; font-size:32pt;" onclick="stopRun()">停止</td>
    </tr>
</table>
</body>

<script>
    var stop = true;
    var seats = [
        "A-1",
        "A-2",
        "A-3",
        "A-4",
        "A-5",
        "A-6",
        "A-7",
        "B-1",
        "B-2",
        "B-3",
        "B-5",
        "B-6",
        "B-7",
        "B-8",
        "B-9",
        "B-10",
        "B-11",
        "B-12",
        "B-13",
        "B-14",
        "B-15",
        "B-16",
        "B-17",
        "B-18",
        "B-19",
        "B-20",
        "B-22",
        "C-1",
        "C-2",
        "C-3",
        "C-4",
        "C-5",
        "C-6",
        "C-7",
        "C-8",
        "C-9",
        "C-10",
        "C-11",
        "C-12",
        "C-13",
        "C-14",
        "C-15",
        "C-16",
        "D-1",
        "D-2",
        "D-3",
        "D-4",
        "D-5",
        "D-6",
        "D-7",
        "D-8",
        "D-9",
        "D-10",
        "D-11",
        "D-12",
        "D-13",
        "D-14",
        "D-15",
        "D-16",
        "D-17",
        "D-18",
        "D-19",
        "D-20",
        "D-21",
        "D-22",
        "D-23",
        "E-1",
        "E-2",
        "E-3",
        "E-4",
        "E-5",
        "E-6",
        "E-7",
        "E-8",
        "E-9",
        "E-10",
        "E-11",
        "E-12",
        "E-13",
        "E-14",
        "E-15",
        "E-16",
        "E-17",
        "E-18",
        "E-19",
        "F-1",
        "F-2",
        "F-3",
        "F-4",
        "F-5",
        "F-6",
        "F-7",
        "F-8",
        "F-9",
        "F-10",
        "F-11",
        "F-12",
        "G-1",
        "G-2",
        "G-3",
        "G-4",
        "G-5",
        "G-6",
        "G-7",
        "G-8",
        "G-9",
        "G-10",
        "G-11",
        "G-12",
        "G-13",
        "G-14",
        "G-15",
        "G-16",
        "G-17",
        "G-19",
        "G-20",
        "G-21",
        "G-22",
        "G-23",
        "G-24",
        "H-1",
        "H-2",
        "H-3",
        "H-4",
        "H-5",
        "H-6",
        "H-7",
        "H-8",
        "H-9",
        "H-10",
        "H-11",
        "H-12",
        "H-13",
        "H-14",
        "H-15",
        "H-16",
        "J-1",
        "J-2",
        "J-3",
        "J-4",
        "J-5",
        "J-6",
        "J-7",
        "J-8",
        "J-9",
        "J-10",
        "J-11",
        "J-12",
        "J-13",
        "J-14",
        "J-15",
        "J-16",
        "J-17",
        "J-18",
        "J-19",
        "J-20",
        "J-21",
        "J-22",
        "J-23",
        "J-24",
        "J-25",
        "J-26",
        "J-27",
        "K-1",
        "K-2",
        "K-3",
        "K-4",
        "K-5",
        "K-6",
        "K-7",
        "K-8",
        "K-9",
        "K-10",
        "K-11",
        "K-12",
        "K-13"
    ]

    function init() {
        var line = "";
        for (var i = 0; i < 18; i++) {
            line += "<tr>";
            for (var j = 0; j < 10; j++) {
                var num = i*10+j;
                line += "<td style='width:10%; text-align:center;' id='"+i+"_"+j+"'>" + (num<seats.length?seats[num]:"N/A") + "</td>";
            }
            line += "</tr>";
        }
        $("#box").html(line);
    }

    function startRun() {
        if (stop) {
            stop = false;
            next();
        }
    }

    function stopRun() {
        stop = true;
    }

    function splash() {
        for (var i = 0; i < 18; i++) {
            for (var j = 0; j < 10; j++) {
                var cc=$("#" + i + "_" + j);
                cc.css("background-color", "#FFF");
                cc.css("color", "#000");
                cc.attr("x", "0");
            }
        }
        for (var x=0;x<5;x++) {
            var v = Math.floor(Math.random() * seats.length);
            var i=Math.floor(v / 10);
            var j=(v % 10);
            var cc=$("#" + i + "_" + j);
            if (cc.attr("x") == "1") {
                continue;
            }
            cc.css("background-color", "#337ab7");
            cc.css("color", "#FFF");
            cc.attr("x", "1");
        }
    }

    function next() {
        splash();
        if (!stop)
            setTimeout("next()", 100);
    }

    $(function() {
        init();
    })
</script>

</html>